
import { MenuFoldOutlined, MenuUnfoldOutlined, UploadOutlined,
    UserOutlined,VideoCameraOutlined,} from '@ant-design/icons';
import { Layout, Menu, theme } from 'antd';
import React, { useState } from 'react';
import { useAuth } from "../context/AuthProvider";
import { Switch } from "react-router-dom";
import AuthRoute from "../components/AuthRoute";
const { Header, Sider, Content } = Layout;

const Home = ({routes,history,location:{pathname}}) => {

    console.log(routes)
    
    const [collapsed, setCollapsed] = useState(false);
    // const {  token: { colorBgContainer },} = theme.useToken();
    // const { deleteUser } = useAuth();
    const go=({key})=>{
        console.log(key)
        history.push(key)
    }

    return (
      <Layout>
        <Sider trigger={null} collapsible collapsed={collapsed}>
          <div className="logo" />
          <Menu
            onClick={go}
            theme="dark"
            mode="inline"
            selectedKeys={[pathname]}
            items={[
                {
                    key: '/',
                    icon: <UserOutlined />,
                    label: '用户管理',
                },
                {
                    key: '/video',
                    icon: <VideoCameraOutlined />,
                    label: '视频管理',
                },
                {
                    key: '/upload',
                    icon: <UploadOutlined />,
                    label: '投稿管理',
                },
            ]}
          />
        </Sider>
        <Layout className="site-layout">
          <Header
            className="site-layout-background"
            style={{
                padding: 0,
            //   background: colorBgContainer,
            }}
          >
            {
                React.createElement(
                    collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, 
                    {
                        className: 'trigger',
                        onClick: () => setCollapsed(!collapsed),
                    }
                )
            }
          </Header>
          <Content
            className="site-layout-background"
            style={{
              margin: '24px 16px',
              padding: 24,
              height:'calc(100vh - 115px)',
            //   background: colorBgContainer,
            }}
          >
            Content
            <Switch>
            {   
                routes.map((route,index) => {
                    return <AuthRoute key={index} {...route} />
                })
            }
            </Switch>
          </Content>
        </Layout>
      </Layout>
    );
  };
  export default Home;